<template>
    <div id="app" class="bg-assist" v-loading.body="$store.state.loading">
      	<transition :name="pageAnimationName">
        	<router-view></router-view>
        </transition>
        <el-dialog title="绑定手机号" :visible.sync="dialogVisible" size="large" :show-close="false"
        :close-on-click-modal="false"
        :lock-scroll="true">
          <el-form ref="bindForm" :model="form" :rules="rules" label-position="left">
            <el-form-item label="手机号" label-width="80px" prop="phone">
              <el-input v-model="form.phone" auto-complete="off" />
            </el-form-item>
            <el-form-item label="验证码" label-width="80px" prop="code">
              <el-input v-model="form.code" auto-complete="off">
                  <template slot="append">
                      <el-button :disabled="timeout>0" @click="sendVerifyCode">{{this.timeout ? this.timeout+'秒重发' : '发送验证码'}}</el-button>
                  </template>
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="bindPhone">绑 定</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
import animations from '~/css/animations.css';
import api from '~/api/api.js';

export default {
	name: 'App',
	data () {
		return {
            // 重发验证码等待时间
            timeout: 0,
            dialogVisible: false,
			pageAnimationName: '',
            form: {
                phone: '',
                code: ''
            },
            rules: {
                phone: [
                    {required: true, message: '请输入手机号', trigger: 'blur'},
                    {pattern: /^1[0-9]{10}$/, message: '请输入正确的手机号', trigger: 'blur'},
                ],
                code: [
                    {required: true, message: '请输入验证码', trigger: 'blur'},
                ]
            }
		}
	},
    created () {
        if (this.$route.query.login == 1) {
          this.$store.commit('login');
        }
        this.$store.dispatch('checkUser')
        .then(() => {
            this.$store.dispatch('getCart');
        });
    },
	watch: {
		'$route' (to, from) {
			const toDepth = to.path.split('/').length;
    		const fromDepth = from.path.split('/').length;
    		if (toDepth < fromDepth) {
    			this.pageAnimationName = 'page-left';
    		} else if (toDepth > fromDepth) {
    			this.pageAnimationName = 'page-right';
    		} else {
    			this.pageAnimationName = 'page';
    		}
		}
	},
    methods: {
        // 发送验证码
        sendVerifyCode () {
            if (this.timeout > 0) {
                return ;
            }
            if (!/^1[0-9]{10}/.test(this.form.phone)) {
                return this.$message.warning('请输入正确的手机号码');
            }
            api.post('/sms/send', {
                type: 'bindPhone',
                phone: this.form.phone
            })
            .then(response => {
                this.$message.success('发送成功');
            });
            this.timeout = 60;
            let timefunc = () => {
                this.timeout--;
                if (this.timeout > 0) {
                    setTimeout(timefunc, 1000);
                }
            }
            setTimeout(timefunc, 1000);
        },
        bindPhone () {
            this.form
            api.post('/user/save?code='+this.form.code, {
                phone: this.form.phone
            })
            .then(response => {
                this.$message.success('绑定成功');
                this.dialogVisible = false;
            })
            .catch(error => {
                if(error.response && error.response.status == 422) {
                    this.$message.warning(error.response.data.error);
                }
            })
        }
    }
}
</script>

<style>
#app {
  height: 100%;
}
</style>
